<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/column-list.css">
</head>
<body>
<div id="title">
    万源交通
</div>
<div id="left-box">
    <ul>
        <script type="text/html" id="tabTemp">
            {{each}}
            <li id="tab{{index}}" class="{{$index===0 && 'active'}} tab" data-menuId="{{$value.menuId}}" data-name="{{$value.name}}" data-id="{{$value.id}}">
                {{$value.name}}
            </li>
            {{/each}}
        </script>
    </ul>
</div>
<div id="right-box">
    <!--文字列表样式A-->
    <div id="textListStyleA" class="tab-content">
        <script type="text/html" id="textListStyleATemp">
            <ul class="simple-list">
                {{each}}
                <li class="list-item"
                    data-url="{{$imports.getListUrl($value)}}?id={{$value.id}}">
                    <div class="icon">
                        {{if $value.genre==3}}
                        <img src="../images/text-list/sp.png" alt="">
                        {{else}}
                        <img src="../images/text-list/wz.png" alt="">
                        {{/if}}
                    </div>
                    <h3 class="title marquee">{{$value.titleName}}</h3>
                    <span class="time">{{$value.createTime  |DateFormat 'yyyy-MM-dd'}}</span>
                </li>
                {{/each}}
            </ul>
        </script>
    </div>
    <!--文字列表样式B-->
    <div id="textListStyleB" class="tab-content">
        <script type="text/html" id="textListStyleBTemp">
            <ul class="simple-list">
                {{each}}
                <li class="list-item"
                    data-url="{{$imports.getListUrl($value)}}?id={{$value.id}}">
                    <h3 class="title marquee">{{$value.titleName}}</h3>
                    <span class="time">{{$value.createTime  |DateFormat 'yyyy-MM-dd'}}</span>
                </li>
                {{/each}}
            </ul>
        </script>
    </div>
    <!--图片列表样式A-->
    <div id="imgListStyleA" class="tab-content">
        <script type="text/html" id="imgListStyleATemp">
            {{each}}
            <div class="list-item" data-url="{{$imports.getListUrl($value)}}?id={{$value.id}}">
                <div class="list-item-wrap">
                    <div class="preview-img">
                        <img src="{{$imports.CONFIG.IMAGE_RESOURCES_ADDRESS+$value.pictures}}" alt=""
                             onerror="this.src='../images/default.png'">
                    </div>
                    <!--<div class="play-btn">-->
                    <!--<img src="../images/ygwl/play.png" alt="">-->
                    <!--</div>-->
                    <div class="title">
                        {{$value.titleName}}
                    </div>
                </div>
            </div>
            {{/each}}
        </script>
    </div>
    <!--图片列表样式B-->
    <div id="imgListStyleB" class="tab-content">

    </div>
    <!--视频列表样式A-->
    <div id="videoListStyleA" class="tab-content">
        <script type="text/html" id="videoListStyleATemp">
            {{each}}
            <div class="list-item" data-url="{{$imports.getListUrl($value)}}?id={{$value.id}}">
                <div class="list-item-wrap">
                    <div class="preview-img">
                        <img src="{{$imports.CONFIG.IMAGE_RESOURCES_ADDRESS+$value.pictures}}" alt=""
                             onerror="this.src='../images/default.png'">
                    </div>
                    <div class="play-btn">
                        <img src="../images/column-list/play.png" alt="">
                    </div>
                    <div class="title">
                        {{$value.titleName}}
                    </div>
                </div>
            </div>
            {{/each}}
        </script>
    </div>
    <!--视频列表样式B-->
    <div id="videoListStyleB" class="tab-content">
    </div>

    <!--自定义列表样式A-->
    <div id="customListStyleA" class="tab-content">
        <script type="text/html" id="customListStyleATemp">
            {{each}}
            <div class="list-item" data-url="text-list.html?title={{$value.name}}&id={{$value.id}}&menuId={{$value.menuId}}">
                <div class="list-item-wrap">
                    {{$value.name}}
                </div>
            </div>
            {{/each}}
        </script>
    </div>

</div>
<div id="page"></div>

<script src="../js/S.js"></script>
<script src="../js/common.js"></script>
<script src="../js/tvProcess.js"></script>
<script src="../js/template-web.js"></script>
<script src="../js/list.js"></script>
<script>
    /**
     * DEMO测试数据正式环境请删除
     * 创建于幸福万源项目
     */
    tools.test('http://10.0.1.122:8080/CMSInterfaceManage/myServletControls.do?action=getMenusByFileJson&fname=configs/wanYuanSynthesize/wanYuanSynthesizeTVConfig.json');
    API.MACLogin("11-44-77",function (data) {
        if(data.status===1 ){
            LOGIN_TOKEN=data.datas[0].loginToken;
            LOGIN_DATA=data;
        }
    });


    //获取url参数
    var id = tools.getUrlParam('id') || '12211629579880107';
    var menuId = tools.getUrlParam('menuId') || '0108101606630013';
    var title = tools.getUrlParam('title') || '';
    $('#title').text(title);

    function getCurLeave() {
        if(tools.getLeave()){
            return tools.getLeave();
        }
        if($('.leave').length){
            return $('.leave')[0].id
        }
        return 'tab1'
    }
    //    可以用.leave类取得
    keyopt.options.focusElm = "tab1";

    var tabList = new List({
        action: 'getMenuByPid_new',
        tempId: 'tabTemp',
        itemClassName: 'tab',
        params: {
            pmenuid: id
        },
        callback: function (data) {
            switchTab(getCurLeave());
            tabList.setListGoRight('listItem1');
            tabList.setListOnSubmit(function (code, id) {
                switchTab(id);
            });
        }
    });
    tabList.getData();

    function newList(elemId, action, callback) {
        var list = new List({
            action: action || 'getWanYuanContentList',
            tempId: elemId + 'Temp',
//        col: 3,
            params: {
                menuId: '01091125577760000',
                pageSize: 6,
                pageIndex: 0
            },
            callback: function (data) {
                tools.recoveryFocus();
                list.setListGoLeft(getCurLeave());
                list.setListOnSubmit(function (id, code) {
                    tools.saveFocus({
                        page:list.def.currentPage-1
                    });
                });
                $('.tab-content').hide();
                document.getElementById(list.def.tempId).parentNode.style.display = 'block';
                callback && callback(data)
            }
        });
        return list;
    }

    function switchTab(id) {
        var menuId = document.getElementById(id).getAttribute('data-menuId');
        var name = document.getElementById(id).getAttribute('data-name');
        var pid = document.getElementById(id).getAttribute('data-id');

//        清除
        $('.list-item').attr('id','');
        switch (name){
            case '交通概况':
                newList('customListStyleA','getMenuByPid_new')
                    .setOptions('col',3)
                    .setParams({pmenuid: pid})
                    .getData()
                    .addPositionControl(0,0,0,308);
                break;
            default:
                newList('textListStyleA')
                    .setParams({pageIndex: tools.getSave('page'),pageSize: 7,menuId: menuId})
                    .getData()
                    .addPageControl();
                break;
        }
        tools.clearLeave();
        tools.addClass(id, 'leave');
    }
</script>
</body>
</html>